<template>
	<div id="con_invoice_record" v-loading="$store.state.saving"
				element-loading-text="保存中" element-loading-spinner="el-icon-loading"
				element-loading-background = "rgba(255,255,255,0.8)">
		<el-form :model="conInvoice" ref="refConInvoice" :rules="conInvoiceRules" label-width="110px"  style="overflow:hidden">
			<el-form-item label="客户">
				<el-input disabled v-model="contract.customer.customerName"></el-input>
			</el-form-item>
			<el-form-item label="合同名称">
				<el-input disabled v-model="contract.contractNum"></el-input>
			</el-form-item>
			<el-form-item label="开票内容" prop="invCon" class="inline__">
				<el-input v-model="conInvoice.invCon"></el-input>
			</el-form-item>
			<el-form-item label="票据类型" prop="invType" class="inline__">
				<el-select v-model="conInvoice.invType" value-key="id" style="width:100%!important">
					<el-option v-for="item in InvTypes" :key="item.id" :label="item.name" :value="item"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="票据金额" prop="invMoney" class="inline__">
                <el-input type="number" v-model="conInvoice.invMoney"></el-input>
			</el-form-item>
            <el-form-item label="开票日期" prop="invBeginDate" class="inline__">
				<el-date-picker type="date" readonly  v-model="conInvoice.invBeginDate" style="width:100%!important"></el-date-picker>
			</el-form-item>
			<el-form-item label="经手人" class="inline__">
                <el-select filterable v-model="conInvoice.handleEmp" value-key="empId" style="width:100%!important">
					<el-option-group v-for="d in  dept_emps" :key="d.departmentId" :label="d.departmentName">
						<el-option v-for="e in d.deEmp" :key="e.empId" :label="e.empName" :value="e"></el-option>
					</el-option-group>
				</el-select>
			</el-form-item>
			<el-form-item label="是否回款" class="inline__">
                <el-radio-group v-model="conInvoice.isReturnMon" disabled>
                    <el-radio :label="1">已回款</el-radio>
                    <el-radio :label="2">未回款</el-radio>
                </el-radio-group>
			</el-form-item>
			<el-form-item label="备注">
                <el-input type="textarea" v-model="conInvoice.conInvoiceRemark"></el-input>
			</el-form-item>
            <el-form-item>
				<el-button type="primary" @click="submitForm">保存</el-button>
				<el-button @click="$parent.$parent.conInvoiceRecordDialogVisible = false">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
export default {
	name: 'conInvoiceRecord',
	props: ["contract"],
	data() {
        var validateMax = (rule, value, callback) => {
			if(value > this.maxInvMoney){
				callback(new Error("开票金额最大为"+this.maxInvMoney))
			}else if(value < 0){
				callback(new Error("金额必须大于0"))
			}else{
				callback()
			}
        }
		return {
			conInvoice:{					// 开票记录对象
				invBeginDate:new Date(),	// 开票日期
				isReturnMon:2,				// 是否回款
				handleEmp:this.$store.state.user,
                invMoney:''
			},
			InvTypes:[],					// 票据类型
			dept_emps:[],					// 部门员工对象
			conInvoiceRules:{				// 表单验证规则
				invCon:[
					{ required: true, message: '请填写开票内容', trigger: 'blur' },
				],
				invType:[
					{ required: true, message: '请选择票据类型', trigger: 'blur' }
				],
				invMoney:[
					{ required: true, message: '请填写开票金额', trigger: 'blur' },
                    { validator: validateMax, trigger: 'change' },
				]
			}
		}
	},
	methods:{
		initData(){
			// 获取票据类型列表
			this.axios.get("api/dd/invType")
			.then(res => {
				this.InvTypes = res.data
			})
			.catch(err => {
				this.global.mes_error("获取数据失败！")
			})

			/* 获取部门员工列表 */
			this.axios.get("api/dept_emps")
			.then(res => {
				this.dept_emps = res.data
			})
			.catch(
				
			)
		},
		// 表单提交
		submitForm(){
			this.$refs.refConInvoice.validate(valid => {
				if(valid){
					this.conInvoice.contract = this.contract
					this.$store.state.saving = true
					this.axios.post("api/in-sale/conInvoice",this.conInvoice)
					.then(async res => {
						await this.editReturnRecord()
						// 判断是否从抽屉打开
						if(this.isDrawer){
							this.$parent.$parent.$refs.contractDrawer.initData()
						}else{
							// 刷新
							this.$parent.$parent.initData()
						}
						this.$store.state.saving = false
						// 关闭弹窗
						this.$parent.$parent.conInvoiceRecordDialogVisible = false
						this.global.mes_success("开票记录保存成功")
					})
					.catch(err => {
						this.$store.state.saving = false
						this.global.mes_error("开票记录保存失败，请稍后再试！")
					})
				}else{
					this.global.mes_error("数据校验不通过，请修改后再重新提交！")
					return false
				}
			})
		},
		async editReturnRecord(){
			if(this.returnRecord){
				this.returnRecord.takeInvoice = 1
				this.returnRecord.contract = this.contract
				await this.axios.post("api/in-sale/returnRecord", this.returnRecord)
				.catch(()=>{
					this.$store.state.saving = false
					this.global.mes_error("开票记录保存失败，请稍后再试！")
				})
				
			}
		}
		
	},
	created(){
		this.initData()
	},
	computed:{
		maxInvMoney(){
            return this.contract.totalMoney-this.contract.invoiceMoney
        }
	}
}
</script>

<style scoped>
#con_invoice_record .el-form-item{width: 100%;margin-bottom: 22px !important;}
.inline__{width:50%!important;display:inline-block}
</style>